﻿<?php 
include_once('./configs/config.php');

$result = mysql_query("SELECT * FROM 510_procut LIMIT 0 , 5");
$liheproi=0;
$lihepropic="";
while($lihepro = mysql_fetch_array($result))
  {
  $lihepropic=$lihepropic."<li><img src=\"".$lihepro['pic_1']."\" width=260 /></li>";
 $liheproi=$liheproi+1;
  }
?><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $wxyxm?></title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="template/wb/js/zepto.js"></script>
<style type="text/css">
body{padding:0;margin:0;font-size:14px;font-family:Arial;}h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}dl,dt,dd,ul,li,ol{list-style:none;}img{border:0;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
body{background:url(template/wb/images/tb.png) repeat-x;background-size:2px 334px;}
.main{width:100%;}
.main .box{width:100%;height:334px;background:url(template/wb/images/bg.jpg) center 0 no-repeat;background-size:320px 334px;}
.main .title{text-align:center;padding-top:10px;}
.main .cont{position:relative;width:100%;height:180px;overflow:hidden;}
.main .cont .imgbox{width:1000%;height:200px;}
.main .cont .imgbox ul{float:left;height:200px;width:50%;}
.main .cont .imgbox li{float:left;height:200px;width:20%;text-align:center;}
.main .sign{position:absolute;width:100%;bottom:0;text-align:center;}
.main .sign li{height:8px;width:8px;border-radius:4px;display:inline-block;margin:4px;background:#fff;}
.main .btn{width:145px;height:49px;line-height:49px;background:url(template/wb/images/button_1.png) no-repeat;background-size:145px 49px;color:#000;font-size:18px;text-align:center;margin:5px auto;}
.main p{text-align:center;font-size:12px;color:#333;}
</style>

</head>

<body><link rel="stylesheet" type="text/css" href="bdad.css">
<div class="main">
	<div class="box">
		<div class="title"><img src="<?php echo $wxad;?>" width="270" height="139"/></div>
		<div class="cont">
			<ul class="sign" id="sign">
				<?php FOR ($i = 0; $i <= $liheproi-1; $i++)
				{
				echo "<li id=\"num".$i."\"></li>";
				}?>
			</ul><!--/sign-->
			<div class="imgbox" id="imgbox">
				<ul id="contimg"><?php echo $lihepropic;?>
				</ul><!--/contimg-->
				<ul id="contimg2">
				</ul><!--/contimg2-->
			</div><!--/imgbox-->
		</div><!--/cont-->
	</div><!--/box-->
	<div class="btn" onClick="window.location='<?php if (strlen($_COOKIE["liheid"])==0){echo "get.php";}else{echo "back.php?key=".$_COOKIE["liheid"];}?>'">领取礼盒</div><div class="btn" onClick="window.location='shuoming.php'">活动说明</div>
  <div class="btn" onClick="window.location='<?php echo $wxgz?>'"><span>关注微信</span></div><br>
	<p><a onClick="window.location='liebiao.php'">查看获奖名单&gt;</p>
	 <p><a href="#" style="color:#000; text-decoration:none"><?php echo $wxyxjj;?></a></p><br>
	<br><br>
</div><!--/main-->
<script type="text/javascript">
var s_width=0;//控制变量
var img_width=$(window).width();//图片宽度，每次滚动距离
var img_num=<?php echo $liheproi;?>;//图片数量
var max_width=-(img_width*img_num);//滚动宽度
var speed=3000;//定时器时间间隔

var num=0;//当前图片编号
var pic=document.getElementById("imgbox");
var mebtnopenurl = '<?php echo $wxwz?>';
var timeLineLink = '<?php echo $wxwz?>';
$(function(){
	//给手机盒子设定宽度
	$("#imgbox").width(img_width*img_num*2);
	$("#contimg li").width(img_width);
	
	$("#contimg2").html($("#contimg").html());
	interval=setInterval(run, speed);
	
	touches(pic,"swiperight",function(){//向右触摸
		clearInterval(interval);
		$("#num"+num).css("background-color","#fff");
		if(s_width==0){
			$("#imgbox").css("marginLeft",max_width);
			s_width=max_width;	
		}
		s_width+=img_width;
		$("#imgbox").animate({marginLeft:s_width+"px"},260);
		if(num==0){
			num=<?php echo $liheproi-1;?>;
		}else{
			num--;
		}
		$("#num"+num).css("background-color","yellow");
		interval=setInterval(run, speed);
	});
	
	touches(pic,"swipeleft",function(){//向左触摸
		clearInterval(interval);
		$("#num"+num).css("background-color","#fff");
		if(s_width<=max_width){
			$("#imgbox").css("marginLeft","0px");
			s_width=0;	
		}
		s_width-=img_width;
		$("#imgbox").animate({marginLeft:s_width+"px"},260);
		if(num==<?php echo $liheproi-1;?>){
			num=0;
		}else{
			num++;
		}
		$("#num"+num).css("background-color","yellow");
		interval=setInterval(run, speed);	
	});
	
	addLoadEvent(preloader);//预加载
})

function touches(obj,direction,fun){
	//obj:ID对象
	//direction:swipeleft,swiperight,swipetop,swipedown,singleTap,touchstart,touchmove,touchend
	//           划左，     划右，     划上，     划下，     点击，    开始触摸，   触摸移动， 触摸结束
	//fun:回调函数
	var defaults={x:5,y:5,ox:0,oy:0,nx:0,ny:0};
	direction=direction.toLowerCase();
	//配置：划的范围在5X5像素内当点击处理
	obj.addEventListener("touchstart",function() {
		defaults.ox=event.targetTouches[0].pageX;
		defaults.oy=event.targetTouches[0].pageY;
		defaults.nx=defaults.ox;
		defaults.ny=defaults.oy;
		if(direction.indexOf("touchstart")!=-1)fun();
	}, false);
	obj.addEventListener("touchmove",function() {
		event.preventDefault();
		defaults.nx=event.targetTouches[0].pageX;
		defaults.ny=event.targetTouches[0].pageY;
		if(direction.indexOf("touchmove")!=-1)fun();
	}, false);
	obj.addEventListener("touchend",function() {
		var changeY=defaults.oy - defaults.ny;
		var changeX=defaults.ox - defaults.nx;
		if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>defaults.y){
			//左右事件
			if(changeX > 0) {
				if(direction.indexOf("swipeleft")!=-1)fun();
			}else{
				if(direction.indexOf("swiperight")!=-1)fun();
			}
		}else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>defaults.x){
			//上下事件
			if(changeY > 0) {
				if(direction.indexOf("swipetop")!=-1)fun();
			}else{
				if(direction.indexOf("swipedown")!=-1)fun();
			}
		}else{
			//点击事件
			if(direction.indexOf("singleTap")!=-1)fun();
		}
		if(direction.indexOf("touchend")!=-1)fun();
	}, false);
}


function run(){//图片滚动事件
	if(s_width<=max_width){
		$("#imgbox").css("marginLeft","0px");
		s_width=0;
	}
	$("#num"+num).css("background-color","#fff");
	s_width-=img_width;
	$("#imgbox").animate({marginLeft:s_width+"px"},500);
	if(num==<?php echo $liheproi-1;?>){
		num=0;
	}else{
		num++;
	}
	$("#num"+num).css("background-color","yellow");
}

//预加载
function preloader(){
    if(document.images){
        var img1=new Image();
        var img2=new Image();
        var img3=new Image();
		var img4=new Image();
        var img5=new Image();
        img1.src="template/wb/images/box1.png";
        img2.src="template/wb/images/box2.png";
        img3.src="template/wb/images/box3.png";
		img4.src="template/wb/images/box4.png";
        img5.src="template/wb/images/box5.png";
    }
}
function addLoadEvent(func){
    var oldonload=window.onload;
    if (typeof window.onload!='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            if(oldonload){
                oldonload();
            }
            func();
        }
    }
}
</script>
<script type="text/javascript" src="template/wb/js/share_2.js"></script>


<div style="display:none;"></div>
</body>
</html>
<?php mysql_close($con);?>